<template>
  <!-- 单列/双列圆柱滚子轴承滚动体受载与寿命计算 -->
  <div class="all" style="height: 100%;width: 100%;overflow-x:auto;overflow-y:auto;">
    <a-row style="width: 100%;height: 100%">
      <a-col span="11" style="height: 100%">
        <div class="left">
          <div style="width: 100%;height: 3%;background: #D7D7D7">输入参数</div>
          <div style="width: 100%;height: 97%">
            <div class="left_top">
              <div style="height: 5%;width: 100%">基本参数</div>
              <div style="height: 95%;width: 100%">
                <div style="height: 5%;width: 100%;position:relative">
                  <label style="position: absolute;left: 8%">载荷类型</label>
                  <select v-model="params_21.load_type" style="position: absolute;left: 18%">
                    <option value="1">极限载荷</option>
                    <option value="2">疲劳载荷</option>
                  </select>
                  <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
                    <button v-show="params_21.load_type==1" style="position: absolute;left: 35%;top: 0;height: 90%;width: 40%">导入轴承极限载荷</button>
                  </a-upload>
                  <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
                    <button v-show="params_21.load_type==2" style="position: absolute;left: 35%;top: 0;height: 90%;width: 40%">导入轴承疲劳载荷</button>
                  </a-upload>

                </div>
                <div style="height: 5%;width: 100%;margin-left: 2%">
                  <p>注：载荷文件为.xls或.xlsx格式，其各列参数如下表所示(无需表头)</p>
                </div>
                <div style="height: 20%;width: 94%;position: relative;top: 3%;left: 2%;overflow-y: auto;overflow-x: auto">
                  <table v-show="params_21.load_type==1" class="zaihe" style="width: 100%;height: 100%" >
                      <tr class="title2" style="font-size: 14px">
                        <th>序号</th>
                        <th>Fx(N)</th>
                        <th>Fy(N)</th>
                        <th>Fz(N)</th>
                        <th>Mx(Nmm)</th>
                        <th>My(Nmm)</th>
                      </tr>
                      <tr class="tbody" v-for="(item,index) in spectrum_n" :key="index">
                        <td>{{item[0]}}</td>
                        <td>{{item[1]}}</td>
                        <td>{{item[2]}}</td>
                        <td>{{item[3]}}</td>
                        <td>{{item[4]}}</td>
                        <td>{{item[5]}}</td>
                      </tr>
                    </table>
                  <table v-show="params_21.load_type==2" class="zaihe" style="width: 100%;height: 100%">
                    <tr class="title1" style="font-size: 14px">
                      <th>序号</th>
                      <th>Fx(N)</th>
                      <th>Fy(N)</th>
                      <th>Fz(N)</th>
                      <th>Mx(Nm)</th>
                      <th>My(Nm)</th>
                      <th>时间占比</th>
                    </tr>
                    <tr class="tbody" v-for="(item,index) in spectrum_n" :key="index">
                      <td>{{item[0]}}</td>
                      <td>{{item[1]}}</td>
                      <td>{{item[2]}}</td>
                      <td>{{item[3]}}</td>
                      <td>{{item[4]}}</td>
                      <td>{{item[5]}}</td>
                      <td>{{item[6]}}</td>
                      <td>{{item[7]}}</td>
                    </tr>
                  </table>
                </div>
                <div style="height: 65%;width: 100%;margin-top: 3%;display: flex">
                  <div style="height: 100%;width: 40%;display: flex">
                    <div style="height: 100%;width: 65%">
                      <ul class="left_text" >
                        <li >布置型式</li>
                        <li >轴承内径(mm)</li>
                        <li>轴承外径(mm)</li>
                        <li>滚动体直径(mm)</li>
                        <li>滚动体个数</li>
                        <li>内圈沟曲率半径系数</li>
                        <li>外圈沟曲率半径系数</li>
                        <li>名义接触角(°)</li>
                        <li>轴向游隙(um)</li>
                        <li v-show="params_21.load_type==1">轴承转速(rpm)</li>
                      </ul>
                    </div>
                    <div style="height: 100%;width: 35%">
                      <ul class="left_input">
                        <li >
                          <select v-model="params_21.arrangement_type" style="height: 90%;width: 73%">
                            <option value="1">“O型”</option>
                            <option value="2">“X型”</option>
                          </select>
                        </li>
                        <li ><input v-model="params_21.d" /></li>
                        <li ><input v-model="params_21.D" /></li>
                        <li><input v-model="params_21.Dw"/></li>
                        <li><input v-model="params_21.Z"/></li>
                        <li><input v-model="params_21.fi"/></li>
                        <li><input v-model="params_21.fe"/></li>
                        <li><input v-model="params_21.contact_angle"/></li>
                        <li><input v-model="params_21.axial_clearance"/></li>
                        <li v-show="params_21.load_type==1"><input v-model="params_21.speed"/></li>
                      </ul>
                    </div>
                  </div>
                  <div style="height: 100%;width: 60%;display: flex">
                    <div style="height: 100%;width: 50%">
                      <ul class="right_text" >
                        <li >轴承外圈弹性模量(MPa)</li>
                        <li >轴承外圈泊松比</li>
                        <li>滚动体弹性模量(MPa)</li>
                        <li>滚动体泊松比</li>
                        <li>轴承内圈弹性模量(MPa)</li>
                        <li>轴承内圈泊松比</li>
                        <li>轴承额定动载荷(N)</li>
                        <li>轴承额定静载荷(N)</li>
                      </ul>
                    </div>
                    <div style="height: 100%;width: 28%">
                      <ul class="right_input">
                        <li ><input v-model="params_21.E_e"/></li>
                        <li ><input v-model="params_21.v_e"/></li>
                        <li><input v-model="params_21.E_b"/></li>
                        <li><input v-model="params_21.v_b"/></li>
                        <li><input v-model="params_21.E_i"/></li>
                        <li><input v-model="params_21.v_i"/></li>
                        <li><input v-model="params_21.C"/></li>
                        <li><input v-model="params_21.C0"/></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="left_bottom">
              <div style="width: 100%;height: 5%">修正参数</div>
              <div style="width: 100%;height: 95%;display: flex">
                <div style="width: 45%;height: 100%;display: flex">
                  <div style="width: 55%;height: 100%">
                    <ul class="bottom_text" >
                      <li>轴承疲劳极限载荷(N)</li>
                      <li></li>
                      <li>可靠度(%)</li>
                      <li>清洁度条件</li>
                      <li>润滑方式</li>
                      <li>清洁度等级</li>
                    </ul>
                  </div>
                  <div style="width: 40%;height: 100%">
                    <ul class="bottom_input">
                      <li>
                        <input  :disabled="input.fatiguelife_fatigue_total_limit_input==2" v-model="params_21.Cu" type="text" >
                        <input v-model="input.fatiguelife_fatigue_total_limit_input" value="1" style="height:12px;width:12px;" type="radio">手动</li>
                      <li><div style="text-align: right;width: 95%;"><input v-model="input.fatiguelife_fatigue_total_limit_input" value="2" style="height:12px;width:12px" type="radio">自动</div></li>
                      <li >
                        <select v-model="params_21.reliability">
                          <option value="1">90</option>
                          <option value="2">95</option>
                          <option value="3">96</option>
                          <option value="4">97</option>
                          <option value="5">98</option>
                          <option value="6">99</option>
                          <option value="7">99.2</option>
                          <option value="8">99.4</option>
                          <option value="9">99.6</option>
                          <option value="10">99.8</option>
                          <option value="11">99.9</option>
                          <option value="12">99.92</option>
                          <option value="13">99.94</option>
                          <option value="14">99.95</option>
                        </select>
                      </li>
                      <li>
                        <select v-model="params_21.contamination_condition">
                          <option value="1">润滑油纯净度按ISO4406已知</option>
                          <option value="2">只大体知道清洁度等级</option>
                        </select>
                      </li>
                      <li>
                        <select v-model="params_21.lubricate_method">
                          <option value="1">油润滑，在线过滤</option>
                          <option value="2">油润滑，离线过滤或未过滤</option>
                          <option value="3">脂润滑</option>
                        </select>
                      </li>
                      <li>
                        <select v-model="params_21.contamination_level">
                          <option value="1">-/13/10,-/12/10,-/11/9,-/12/9</option>
                          <option value="2">-/15/12,-/14/12,-/16/12,-/16/13</option>
                          <option value="3">-/17/14,-/18/14,-/18/15,/19/15</option>
                          <option value="4">-/19/16,-/18/16,-/20/17.-21/17</option>
                          <option value="5">-/21/18,-/21/19,-/22/19, -/23/19</option>
                        </select>
                      </li>
                    </ul>
                  </div>
                </div>
                <div style="width: 55%;height: 100%;display: flex">
                  <div style="width: 55%;height: 100%">
                    <ul class="bottom_text1" >
                      <li>润滑油40°C粘度(mm^2/s)</li>
                      <li>润滑油100°C粘度(mm^2/s)</li>
                      <li>润滑油工作温度(C)</li>
                      <li>是否添加极压润滑剂</li>
                    </ul>
                  </div>
                  <div style="width: 45%;height: 100%">
                    <ul class="bottom_input1">
                      <li><input v-model="params_21.v_40"/></li>
                      <li><input v-model="params_21.v_100"/></li>
                      <li><input v-model="params_21.oil_temperature"/></li>
                      <li>
                        <select v-model="params_21.pp4">
                          <option value="1">否</option>
                          <option value="2">是</option>
                        </select>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col span="13" style="height: 100%">
        <div class="right">
          <div style="width: 100%;height: 3%;background: #D7D7D7">输出参数</div>
          <div style="width: 100%;height: 97%">
            <div class="right_top">
              <div style="width: 100%;height: 5%">结果汇总</div>
              <div style="width: 100%;height: 45%;position: relative">
                <div v-show="params_21.load_type==1" style="width: 100%;height: 100%;display: flex;position: absolute;">
                  <div style="height:100%;width: 10%;text-align:center;padding-top: 2%;margin-left: 2%">寿命与静强度计算结果</div>
                  <div class="table1">
                    <table style="width: 160%;height: 100%">
                      <tr style="height: 20%;text-align: center;background-color: #EAEAEA;font-size: 14px">
                        <th>序号</th>
                        <th>可靠度修正系数a1</th>
                        <th>寿命修正系数aISO</th>
                        <th> L10寿命(hr)</th>
                        <th> Lnm寿命(hr)</th>
                        <th>L10r寿命(hr)</th>
                        <th>Lnmr寿命(hr)</th>
                        <th>当量静载荷(N)</th>
                        <th>静强度安全</th>
                      </tr>
                      <tr style="text-align: center" v-for="(item,index) in ans.result_life_spectrum" :key="index">
                        <th>{{item[0]}}</th>
                        <th>{{item[1]}}</th>
                        <th>{{item[2]}}</th>
                        <th>{{item[3]}}</th>
                        <th>{{item[4]}}</th>
                        <th>{{item[5]}}</th>
                        <th>{{item[6]}}</th>
                        <th>{{item[7]}}</th>
                        <th>{{item[8]}}</th>
                      </tr>
                    </table>
                  </div>
                </div>
                <div v-show="params_21.load_type==2" style="width: 100%;height: 100%;display: flex;position: absolute;">
                  <div style="height:100%;width: 10%;text-align:center;padding-top: 5%;margin-left: 2%">寿命计算结果</div>
                  <div class="table1" style="overflow-x: hidden">
                    <table style="width: 100%;height: 100%">
                      <tr style="height: 20%;text-align: center;background-color: #EAEAEA;font-size: 14px">
                        <th>L10寿命(hr)</th>
                        <th>Lnm寿命(hr)</th>
                        <th>L10r寿命(hr)</th>
                        <th>Lnmr寿命(hr)</th>
                      </tr>
                      <tr style="text-align: center" v-for="(item,index) in ans.life_fatigue_total" :key="index">
                        <th>{{item[0]}}</th>
                        <th>{{item[1]}}</th>
                        <th>{{item[2]}}</th>
                        <th>{{item[3]}}</th>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
              <div style="width: 100%;height: 50%;display: flex">
                <div style="margin-left:1%;width: 48%;height: 100%;display: flex">
                  <div style="padding-top: 10%;margin-left: 2%; width: 60%;text-align: center">第1列最大接触应力(MPa)</div>
                  <div class="table1" style="overflow-x: hidden;height: 80%;margin-top: 3%">
                    <table style="width: 100%;height: 100%">
                      <tr style="height: 20%;text-align: center;background-color: #EAEAEA;font-size: 14px">
                        <th>序号</th>
                        <th>应力(MPa)</th>
                      </tr>
                      <tr style="text-align: center" v-for="(item,index) in ans.n_max_spectrum" :key="index">
                        <th>{{item[0]}}</th>
                        <th>{{item[1]}}</th>
                      </tr>
                    </table>
                  </div>
                </div>
                <div style="margin-left:1%;width: 48%;height: 100%;display: flex">
                  <div style="padding-top: 10%;margin-left: 2%; width: 60%;text-align: center">第2列最大接触应力(MPa)</div>
                  <div class="table1" style="overflow-x: hidden;height: 80%;margin-top: 3%">
                    <table style="width: 100%;height: 100%">
                      <tr style="height: 20%;text-align: center;background-color: #EAEAEA;font-size: 14px">
                        <th>序号</th>
                        <th>应力(MPa)</th>
                      </tr>
                      <tr style="text-align: center" v-for="(item,index) in ans.w_max_spectrum" :key="index">
                        <th>{{item[0]}}</th>
                        <th>{{item[1]}}</th>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="right_middle" style="height: 45%">
              <div style="width: 100%;height: 5%">中间结果</div>
              <ul style="width: 100%;height: 95%">
                <li style="width: 100%;height: 30%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                  <div style="width: 15%;height: 100%;text-align: center;margin-top: 2%">最大接触应力(MPa)</div>
                  <div style="width: 85%;height: 100%">
                    <div class="table1" style="overflow-x: hidden">
                      <table style="width: 100%;height: 100%">
                        <tr style="height: 20%;text-align: center;background-color: #EAEAEA;font-size: 14px">
                          <th>序号</th>
                          <th>滚动体序号</th>
                          <th>第1列内圈</th>
                          <th>第1列外圈</th>
                          <th>第2列内圈</th>
                          <th>第2列外圈</th>
                        </tr>
                        <tr style="text-align: center" v-for="(item,index) in ans.stress_all_spectrum" :key="index">
                          <th>{{item[0]}}</th>
                          <th>{{item[1]}}</th>
                          <th>{{item[2]}}</th>
                          <th>{{item[3]}}</th>
                          <th>{{item[4]}}</th>
                          <th>{{item[5]}}</th>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div></li>
                <li style="width: 100%;height: 30%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                  <div style="width: 15%;height: 100%;text-align: center;margin-top: 2%">接触半宽(mm)</div>
                  <div style="width: 85%;height: 100%">
                    <div class="table1" style="overflow-x: hidden">
                      <table style="width: 100%;height: 100%">
                        <tr style="height: 20%;text-align: center;background-color: #EAEAEA;font-size: 14px">
                          <th>序号</th>
                          <th>滚动体序号</th>
                          <th>第1列内圈</th>
                          <th>第1列外圈</th>
                          <th>第2列内圈</th>
                          <th>第2列外圈</th>
                        </tr>
                        <tr style="text-align: center" v-for="(item,index) in ans.semi_minor_all_spectrum" :key="index">
                          <th>{{item[0]}}</th>
                          <th>{{item[1]}}</th>
                          <th>{{item[2]}}</th>
                          <th>{{item[3]}}</th>
                          <th>{{item[4]}}</th>
                          <th>{{item[5]}}</th>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div></li>
                <li style="width: 100%;height: 30%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                  <div style="width: 18%;height: 100%;text-align: center;margin-top: 2%">滚动体最大法向载荷(N)</div>
                  <div style="width: 65%;height: 100%">
                    <div class="table1" style="overflow-x: auto;overflow-y: auto">
                      <table style="width: 120%;height: 100%;">
                        <tr style="height: 20%;text-align: center;background-color: #EAEAEA;font-size: 14px">
                          <th>序号</th>
                          <th>滚动体序号</th>
                          <th>第1列法向载荷(N)</th>
                          <th>第2列法向载荷(N)</th>
                        </tr>
                        <tr style="text-align: center" v-for="(item,index) in ans.qj_all_spectrum" :key="index">
                          <th>{{item[0]}}</th>
                          <th>{{item[1]}}</th>
                          <th>{{item[2]}}</th>
                          <th>{{item[3]}}</th>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div></li>
              </ul>
            </div>
            <div style="width: 100%;height: 10%"><button @click="tclick_11" style="background-color: #D7D7D7;width: 20%;height: 50%;margin-top: 1%;margin-left: 2%;font-size: 16px">计算</button></div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>


import {double_row_angular_contact, firedelete} from "@/api/file";
import {firetext} from "@/api/file";

export default {
  created () {
    document.title = '单列/双列角接触球轴承滚动体受载与寿命计算' //模块中文名
    this.$store.state.file.key = 21 //设置key为自己的页面编号

  },

  name: "namemodule_double_cylin_rollerbearing_cal_last_z_21",
  data(){
    return{
      form2:{
        uuids:[]
      },
      input:{
        fatiguelife_fatigue_total_limit_input:1 ,
      },
      params_21:this.$store.state.file.dataList[21],
      spectrum_n:[[1,1286000,-9000,0,0,0]],
      ans:{
        result_life_spectrum:[[]],
        life_fatigue_total:[[]],
        n_max_spectrum:[[]],
        w_max_spectrum:[[]],
        stress_all_spectrum:[[]],
        semi_minor_all_spectrum:[[]],
        qj_all_spectrum:[[]],
      }
    };
  },
  mounted(){
    //绑定页面退出事件
    window.onbeforeunload= (e)=>{
      e = e || window.event;
      if (e) {
        e.returnValue = '关闭提示';
      }
      this.delete()//调用自己的方法
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示';
    };
  },
  methods:{
    //删除载荷谱
    async delete(){
      this.form2.uuids=this.form2.uuids.toString();//将载荷谱文件数组转成字符串
      await firedelete(this.form2).then(res => {
        console.log(res);
      })
    },
    customRequest(data)
    {
      const formData = new FormData()
      formData.append('fileName', data.file)
      firetext(formData)
          .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
            console.log(res)
            this.spectrum_n=res.data.filedata;
            this.form2.uuids.push(res.data.uuid);
          })
          .catch(error => {
            console.log(error);
          });
    },

    tclick_11()
    {
      this.params_21.spectrum_n=this.spectrum_n.toString();
      // eslint-disable-next-line no-undef
      double_row_angular_contact(this.params_21)
          .then(res => {
            console.log(res);
            // if (res.code === 200) {
            this.ans = res;
            // }
          })
          .catch(error => {
            console.log(error);
          });
    },
  }
}
</script>

<style scoped>
.all
{
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.left,.right
{
  width: 96%;
  height: 96%;
  margin-top: 2%;
  margin-left: 2%;
  box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.left_top
{
  height: 69%;
  width: 98%;
  margin-left: 1%;
  margin-top: 1%;
  padding: 2px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 8px;
}
.title1,.title2
{
  background: #D7D7D7;
  width: 100%;
  height: 10%;
  text-align: center;
}
.title1 th
{
  width: 10%;
}
.title2 th,td
{
  width: 18%;
}
.table
{
  height: 100%;
  width: 100%;
  background: #D7D7D7;
  position: absolute;
  overflow-y: scroll;
}
.tbody
{
  text-align: center;
}

tr:nth-child(odd)  {
  background-color:#D7D7D7;
}

tr:nth-child(even){
  background-color:#f1f1f1;
}
.left_text
{
  width: 100%;
  height: 100%;
  text-align: right;
}
.left_text li
{
  width: 100%;
  height: 10%;
}
.left_input
{
  width: 100%;
  height: 100%;
  margin-left: 10%;
}
.left_input li
{
  width: 100%;
  height: 10%;
}
.left_input input
{
  width: 70%;
  height: 80%;
}
.right_text
{
  width: 100%;
  height: 100%;
}
.right_text li
{
  text-align: right;
  height: 8.3%;
  width: 100%;
}
.right_input
{
  width: 100%;
  height: 100%;
  margin-left: 8%;
}
.right_input li
{
  height: 8.3%;
  width: 100%;
}
.right_input input
{
  width: 60%;
  height: 96%;
}
.left_bottom
{
  height: 28%;
  width: 98%;
  margin-left: 1%;
  margin-top: 1%;
  padding: 2px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 8px;
}
.bottom_text
{
  width: 100%;
  height: 100%;
  text-align: right;
  margin-top: 5%;
}
.bottom_text li,.bottom_input li
{
  height: 15%;
  width: 100%;
}
.bottom_input
{
  height: 100%;
  width: 100%;
  margin-top:9%;
  margin-left: 5%;
}
.bottom_input input,.bottom_input select
{
  height: 90%;
  width: 62%;
}
.bottom_text1
{
  width: 100%;
  height: 100%;
  text-align: right;
}
.bottom_text1 li
{
  width: 100%;
  height: 16%;
}
.bottom_input1
{
  width: 100%;
  height: 100%;
  margin-left: 5%;
}
.bottom_input1 li
{
  width: 100%;
  height: 16%;
}
.bottom_input1 select,.bottom_input1 input
{
  height: 75%;
  width: 34%;
}
.right
{
  width: 96%;
  height: 96.3%;
  margin-top: 1.7%;
  margin-left: 2%;
  box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.right_top,.right_middle
{
  height: 40%;
  width: 98%;
  padding: 2px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 8px;
  margin-top: 1%;
  margin-left: 1%;
}
.table1
{
  height: 90%;
  width: 87%;
  overflow: scroll;
}
.table1 th
{
  width: 10%;
}
.table1 table,th,td{
  border: 1px solid #D7D7D7;
}

.zaihe th,td{
  height: 30%;
  width: 15%;
}
</style>